<div class="modal-header">
  <div class="modal-title">{{title || '配置接收者'}}</div>
</div>
<div>
  <nz-skeleton *ngIf="loading"></nz-skeleton>
  <nz-alert *ngIf="!loading && readonly && !view" style="margin-bottom: 20px;" nzType="warning"
    nzMessage="消息元数据选择广播模式，因此发送策略失效">
  </nz-alert>
  <div *ngIf="!loading" style="margin-bottom: 10px;">
    <h4>账号</h4>
    <nz-tag *ngFor="let item of users" [nzMode]="(readonly || view) ? 'default' :'closeable'"
      (nzOnClose)="handleClose('USER', item)">
      {{item.label}}
    </nz-tag>
    <nz-tag *ngIf="!inputVisible1 && !view" class="editable-tag" nzNoAnimation (click)="showInput('USER')">
      <i nz-icon nzType="plus"></i> 添加账号
    </nz-tag>

    <nz-select #inputElement *ngIf="inputVisible1" style="width: 130px;" nzShowSearch nzServerSearch
      nzPlaceHolder="输入账号或名称" [(ngModel)]="keyword1" [nzShowArrow]="false" [nzFilterOption]="nzFilterOption"
      (ngModelChange)="handleInputConfirm('USER')" (blur)="handleInputConfirm('USER')"
      (nzOnSearch)="onInputForUser($event)">
      <nz-option *ngFor="let o of options1" [nzLabel]="o.label" [nzValue]="o"> </nz-option>
    </nz-select>
  </div>

  <div *ngIf="!loading" style="margin-bottom: 10px;">
    <h4>角色</h4>
    <nz-tag *ngFor="let item of roles" [nzMode]="(readonly || view) ? 'default' :'closeable'"
      (nzOnClose)="handleClose('ROLE', item)">
      {{item.label}}
    </nz-tag>

    <nz-tag *ngIf="!inputVisible2 && !view" class="editable-tag" nzNoAnimation (click)="showInput('ROLE')">
      <i nz-icon nzType="plus"></i> 添加角色
    </nz-tag>

    <nz-select #inputElement2 *ngIf="inputVisible2" style="width: 200px;" nzShowSearch nzServerSearch
      nzPlaceHolder="输入角色编号或名称" [(ngModel)]="keyword2" [nzShowArrow]="false" [nzFilterOption]="nzFilterOption"
      (ngModelChange)="handleInputConfirm('ROLE')" (blur)="handleInputConfirm('ROLE')"
      (nzOnSearch)="onInputForRole($event)">
      <nz-option *ngFor="let o of options2" [nzLabel]="o.label" [nzValue]="o"> </nz-option>
    </nz-select>

  </div>

  <div *ngIf="!loading" style="margin-bottom: 10px;">
    <h4>部门</h4>
    <nz-tag *ngFor="let item of departs" [nzMode]="(readonly || view) ? 'default' :'closeable'"
      (nzOnClose)="handleClose('DEPART', item)">
      {{item.label}}
    </nz-tag>

    <nz-tag *ngIf="!inputVisible3 && !view" class="editable-tag" nzNoAnimation (click)="showInput('DEPART')">
      <i nz-icon nzType="plus"></i> 添加部门
    </nz-tag>

    <nz-select #inputElement3 *ngIf="inputVisible3" style="width: 200px;" nzShowSearch nzServerSearch
      nzPlaceHolder="输入部门编号或名称" [(ngModel)]="keyword3" [nzShowArrow]="false" [nzFilterOption]="nzFilterOption"
      (ngModelChange)="handleInputConfirm('DEPART')" (blur)="handleInputConfirm('DEPART')"
      (nzOnSearch)="onInputForDepart($event)">
      <nz-option *ngFor="let o of options3" [nzLabel]="o.label" [nzValue]="o"> </nz-option>
    </nz-select>

  </div>
</div>
<div class="modal-footer">
  <button nz-button [nzType]="'default'" (click)="close()">
    关闭
  </button>
</div>
